<template>

  <div class="home-container">

    <pull-to :is-bottom-bounce="false"
             :topLoadMethod="refresh"
             @top-state-change="stateChange"
             :top-config="topConfig">

      <template slot="top-block" scope="props">
        <div class="top-load-wrapper">
          <svg class="icon" :class="{
                  'icon-arrow': props.state === 'trigger',
                  'icon-loading': props.state === 'loading'}" aria-hidden="true">
            <use :xlink:href="iconLink"></use>
          </svg>
          {{ props.stateText }}
        </div>
      </template>

      <div class="scroll-main">
        <div class="ts-home-top">
          <div class="ts-home-bg">
            <img class="ts-home-img" ref="homeTop" src="../../assets/imgs/home.png">
          </div>
          <header class="ts-header">
            <div class="ts-wrapper">
              <div class="ts-left" @click="editWorkStatus()">
                <span class="ts-circle" :style="{backgroundColor:work_status?'#ACFF82':'#C6C6C6'}"></span>
                <span>{{work_status ? '在线' : '离线'}}</span>
              </div>
              <div class="middle-title">
                <h1 class="ts-title">首页</h1>
              </div>
              <div class="right-handle" :class="{'isMessage':message>0}" @click="$router.push('/message')">
                <img class="right-icon" src="../../assets/imgs/icon/message.png"/>
              </div>
            </div>
          </header>
          <div class="account-detail-info">
            <div class="info-item">
              <img class="info-icon" src="../../assets/imgs/icon/list.png"/>
              <span class="info-title">本周接单量</span>
              <span class="info-count">{{orders_week_num || 0}}</span>
            </div>
            <div class="info-item">
              <img class="info-icon" src="../../assets/imgs/icon/purse.png"/>
              <span class="info-title">本周收益(元)</span>
              <span class="info-count">{{order_week_price || 0}}</span>
            </div>
          </div>
        </div>

        <section class="filter" ref="filterTab" style="margin-bottom: .08rem;">
          <div class="filter-header">
            <a v-for="(item,key,index) in filterItem" class="filter-item" @click="setCurrTabIndex(parseInt(key))"
               :class="parseInt(key)===currentTabIndex?'active':''">{{item.name}}</a>
          </div>
        </section>

        <flex-view>

          <div class="order-container" ref="wrapper"  @touchmove.stop="">

            <div class="order-card-list" v-for="(item,key,index) in orderList" :key="key"
                 v-show="currentTabIndex===parseInt(key)">

              <pull-to :is-top-bounce="true" @infinite-scroll="loadMore" top-pull>
                <!---->
                <!--<div class="order-spinner" v-if="filterItem[key].loading">-->
                <!--<mt-spinner type="fading-circle" color="#26a2ff"></mt-spinner>-->
                <!--</div> v-if="order.order_status!==4"-->

                <section class="order-list" v-for="(order,num) in item" :key="order.id" >
                  <div class="head">
                    <span class="order-no">订单编号：{{order.order_id}}</span>
                    <span v-show="" class="contacts">{{order.name}}
                  <a :href="`tel:${order.userTel}`">
                    <img class="contacts-icon" src="../../assets/imgs/icon/phone-orange.png"/>
                  </a>
                </span>
                  </div>
                  <ul class="data-list">
                    <li class="list-item">
                  <span class="item-rows">服务类型：
                    <span class="item-value">
                      {{order.type_name + '-' + order.brand_name + '-' + order.class_name}}</span>
                  </span>
                    </li>
                    <li class="list-item">
                  <span class="item-rows">上门费用：
                    <span class="item-value">{{order.price}}元</span>
                  </span>
                    </li>
                    <li class="list-item">
                  <span class="item-rows">上门时间：
                    <span class="item-value">{{order.make_time | fmtCommonDate}}</span>
                  </span>
                    </li>
                    <li class="list-item">
                      <p class="item-rows">服务位置：
                        <span class="item-value"
                              @click="goAmap({lon:order.lon,lat:order.lat,destName:order.latlon_address})">
                      <img class="list-item-icon"
                           src="../../assets/imgs/icon/address.png"/>{{order.latlon_address}}</span>
                      </p>
                    </li>
                    <li class="list-item" v-if="order.images&&order.images.length>0">
                  <span class="item-rows">故障照片：
                    <span @click="showPhoto(order.images)" class="item-value link">点击查看</span>
                  </span>
                    </li>
                    <li class="list-item" v-show="order.note">
                  <span class="item-rows">
                    <!--<span>备-->
                      <!--<span style="visibility: hidden">占占</span>注：</span>-->
                    <span class="frist">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
                    <span class="item-value long-value" :class="{'show-long':showLong[num]}">{{order.note}}</span>
                    <img @click="showLongValues(num)" class="item-icon" :class="{'rot-img':showLong[num]}"
                         src="../../assets/imgs/icon/down.png">
                  </span>
                    </li>
                  </ul>
                  <div class="footer" v-if="order.order_status!=4">
                    <ts-button v-if="order.order_status===1" type="default" class="radius-btn"
                               @click="ignoreOrder(order.id,num)"
                               plain>忽略
                    </ts-button>
                    <ts-button v-if="order.order_status===1" type="primary" class="radius-btn"
                               @click="orderAction(2,order.id,num)" plain>
                      接单
                    </ts-button>
                    <ts-button v-if="order.order_status===2||order.order_status===3" type="default"
                               class="radius-btn"
                               @click="showMdModal(order.id,num)" plain>
                      改期
                    </ts-button>
                    <ts-button v-if="order.order_status===2" type="primary" class="radius-btn"
                               @click="orderAction(3,order.id,num)" plain>
                      开始服务
                    </ts-button>
                    <ts-button v-if="order.order_status===3" type="primary" class="radius-btn"
                               @click="orderAction(4,order.id,num)" plain>
                      完成
                    </ts-button>
                  </div>
                </section>

                <div class="loading-bar">
              <span v-if="!filterItem[key].allLoaded">
                <svg class="icon icon-loading" aria-hidden="true">
                  <use xlink:href="#icon-loading"></use>
                </svg>
                加载中...
              </span>
                  <span class="no-more" v-else>
                暂无更多数据
              </span>
                </div>

              </pull-to>

            </div>
          </div>

        </flex-view>
      </div>

    </pull-to>

    <ts-tabbar ref="mTabbar"></ts-tabbar>

    <ts-modal title="提示" v-model="mdDateVisible" :lock="true" @onConfirm="mdOrderDate">
      <div class="md-date-container">
        <section class="md-date-reason">
          <label class="md-date-title">改期原因</label>
          <textarea v-model="mdDateForm.rescheduled_events" class="md-date-textarea" rows="4" placeholder="请对原因进行简洁的描述">
          </textarea>
        </section>
        <section class="md-date-reason date-time">
          <label class="md-date-title">改期时间</label>
          <input @click="showTimeSetting"
                 v-model="mdDateForm.temp_time" class="md-input-time" placeholder="请选择" type="text"
                 readonly="readonly"/>
        </section>
      </div>
    </ts-modal>

    <!-- 改期 modal -->
    <md-time-picker @complete="finishMdTime" v-model="mdTimeVisible"></md-time-picker>
    <div v-transfer-dom>
      <previewer :list="imgList" ref="previewer"></previewer>
    </div>
  </div>

</template>

<style lang="scss" src="./index.scss" scoped></style>
<script src="./index.js"></script>
<style lang="scss">
  .md-date-container {
    .md-date-reason {
      &.date-time {
        .md-input-time {
          background: #F7F7F7 url(../../assets/imgs/icon/right.png) no-repeat 96%;
        }
      }
    }
  }
</style>
